<template>
  <!-- 师生情况详情 -->
  <div class="Index-box TeacherSituation-Box">
    <div class="PlanningDetails-title">
      <div class="Detailstitle overallSituationTitle">师生情况</div>
      <div class="Detailsfanhui" @click="closeDetailsfanhui"></div>
    </div>
    <div class="TeacherStudentSituation-top">
      <div class="entSituation-itemAct">现有学校</div>
      <div class="entSituation-item">在建学校</div>
      <div class="entSituation-item">带规划学校</div>
    </div>
    <div class="TeacherStudentSituation-xian"></div>
    <div class="TeacherStudentSituation-wenzi">
      <div class="Situation-wenziItem">学生数量</div>
      <div class="Situation-wenziItem">教师数量</div>
      <div class="Situation-wenziItem">师生比</div>
    </div>
    <div class="TeacherStudentSituation-middle">
      <div class="StudentSituation-item">
        <div class="shujvC">
          <div class="shuzi">666668</div>
          <div class="danwei">人</div>
        </div>
      </div>
      <div class="StudentSituation-item">
        <div class="shujvC">
          <div class="shuzi">88</div>
          <div class="danwei">人</div>
        </div>
      </div>
      <div class="StudentSituation-item">
        <div class="shujvC">
          <div class="shuzi">1:12</div>
          <!-- <div class="danwei">人</div> -->
        </div>
      </div>
    </div>
    <div class="TeacherStudentSituation-bon">
      <barChartEcharts :barChartList="barChartList1" />
    </div>
    <div class="TeacherSituation-xszbjszb">
      <div class="xszbjszb-left"></div>
      <div class="xszbjszb-right"></div>
    </div>
    <div class="bingtu-box">
      <div class="bingtu-left">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
        <div class="bingtuWenzi">
          <div class="bingtuWenzi-item">
            <div class="itemleft">大班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
          <div class="bingtuWenzi-item">
            <div class="itemleft">中班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
          <div class="bingtuWenzi-item">
            <div class="itemleft">小班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bingtu-left">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
        <div class="bingtuWenzi">
          <div class="bingtuWenzi-item">
            <div class="itemleft">大班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
          <div class="bingtuWenzi-item">
            <div class="itemleft">中班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
          <div class="bingtuWenzi-item">
            <div class="itemleft">小班</div>
            <div class="itemright">
              00
              <span>%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="TeacherSituation-ssxq">
      <div class="ssxq-left"></div>
    </div>
    <div class="TeacherSituation-anniu">
      <div class="Situationanniu1">
        <el-select
          v-model="selectItem"
          placeholder="请选择"
          size="small"
          style="width: 100%; height: 100%"
        >
          <el-option
            v-for="item in selectList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
      <div class="Situationanniu2">
        <el-select
          v-model="selectItem"
          placeholder="请选择"
          size="small"
          style="width: 100%; height: 100%"
        >
          <el-option
            v-for="item in selectList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
      <div class="Situationanniu3"></div>
      <div class="Situationanniu4"></div>
    </div>
    <div class="TeacherSituation-box">
      <div class="Biaoge-top">
        <div class="Biaoge-title1">幼儿园名称</div>
        <div class="Biaoge-title2">学生数量</div>
        <div class="Biaoge-title3">教师数量</div>
        <div class="Biaoge-title4">师生占比</div>
        <div class="Biaoge-title5">操作</div>
      </div>
      <div class="Biaoge-centerBox">
        <div class="Biaoge-item" v-for="item in 110">
          <div class="Biaoge-item1">xxx小学</div>
          <div class="Biaoge-item2">xxx</div>
          <div class="Biaoge-item3">xx</div>
          <div class="Biaoge-item4">1:50</div>
          <div class="Biaoge-item5">
            <div class="Biaoge-icon"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import barChartEcharts from "@/components/barChartEcharts.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"
import { ue4 } from "@/utils/unrealJs"
const barChartList1 = ref({
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60],
    学生详情: [20, 30, 40, 50, 60, 70]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253 )"],
    学生详情: ["#41D348", "#41D348"]
  },
  danwei: "单位(人)",
  isShowlegend: true
})
const pieChartObj = ref({
  radius: ["50%", "70%"],
  center: ["23.35%", "50.4%"],
  pieChartList: [
    {
      value: 100,
      name: "现有学校"
    },
    { value: 80, name: "在建学校" },
    { value: 60, name: "带规划学校" }
  ]
})
const selectItem = ref("")
const selectList = ref([
  {
    id: 1,
    name: "现有学校"
  },
  { id: 2, name: "在建学校" },
  { id: 3, name: "带规划学校" }
])
// 返回
const closeDetailsfanhui = () => {
  ue4("GhTeacherSituationDetails", { isClose: false })
}
</script>
<style scoped lang="less">
.TeacherSituation-Box {
  background: url("@/assets/PlanningDetails/XXC_GUIHUAJIANSHE@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  .TeacherStudentSituation-top {
    width: 400px;
    height: 40px;
    display: flex;
    align-items: center;
    .entSituation-item {
      cursor: pointer;
      width: 133px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .entSituation-item:hover {
      cursor: pointer;
      width: 133px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background: url("@/assets/Left/Plan/SSQK_TAB_XZ.svg") no-repeat center;
      background-size: 100% 100%;
    }
    .entSituation-itemAct {
      cursor: pointer;
      width: 133px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background: url("@/assets/Left/Plan/SSQK_TAB_XZ.svg") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .TeacherStudentSituation-xian {
    position: absolute;
    top: 82px;
    width: 100%;
    height: 2px;
    background-color: #6ccef5;
  }
  .TeacherStudentSituation-wenzi {
    top: 90px;
    position: absolute;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-around;
    .Situation-wenziItem {
      font-size: 12px;
      width: 120px;
      height: 48px;
      text-align: center;
      color: #caf0ff;
    }
  }
  .TeacherStudentSituation-middle {
    width: 400px;
    height: 48px;
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    .StudentSituation-item {
      width: 120px;
      height: 48px;
      background-color: pink;
      background: url("@/assets/Left/Plan/SSQK_BJ1.svg") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 10px;
      .shujvC {
        margin: auto;
        display: flex;
        align-items: center;
        padding-top: 8px;
        .shuzi {
          font-size: 18px;
        }
        .danwei {
          margin-top: 4px;
        }
      }
    }
  }
  .TeacherStudentSituation-bon {
    margin-top: 10px;
    width: 100%;
    height: 240px;
  }
  .TeacherSituation-xszbjszb {
    width: 100%;
    height: 17px;
    margin-bottom: 10px;
    display: flex;
    .xszbjszb-left {
      margin-left: 10px;
      width: 71px;
      height: 17px;
      background: url("@/assets/TeacherSituation/XUESHENGZHANBI.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .xszbjszb-right {
      margin-left: 130px;
      width: 71px;
      height: 17px;
      background: url("@/assets/TeacherSituation/JIAOSHIZHANBI.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
  }
  .TeacherSituation-ssxq {
    margin-top: 10px;
    width: 100%;
    height: 17px;
    margin-bottom: 10px;
    display: flex;
    .ssxq-left {
      margin-left: 10px;
      width: 71px;
      height: 17px;
      background: url("@/assets/TeacherSituation/SHISHENGXIANGQING.svg")
        no-repeat center;
      background-size: 100% 100%;
    }
  }
  .TeacherSituation-anniu {
    width: 100%;
    height: 28px;
    display: flex;
    /deep/.el-select__wrapper {
      width: 100% !important;
      height: 100% !important;
      border: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      color: #fff !important;
      font-size: inherit !important;
      .el-select__placeholder {
        font-size: 12px;
        text-align: center;
        line-height: 100%;
        color: #fff;
      }
    }
    .Situationanniu1 {
      cursor: pointer;
      margin-left: 10px;
      width: 100px;
      height: 28px;
      background: url("@/assets/TeacherSituation/XIALAKUANG.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Situationanniu2 {
      cursor: pointer;
      margin-left: 15px;
      width: 100px;
      height: 28px;
      background: url("@/assets/TeacherSituation/XIALAKUANG.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Situationanniu3 {
      cursor: pointer;
      margin-left: 50px;
      width: 50px;
      height: 28px;
      background: url("@/assets/TeacherSituation/AN_SOUSUO_MR.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Situationanniu3:hover {
      cursor: pointer;
      margin-left: 50px;
      width: 50px;
      height: 28px;
      background: url("@/assets/TeacherSituation/AN_SOUSUO_XZ.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Situationanniu4 {
      cursor: pointer;
      margin-left: 15px;
      width: 50px;
      height: 28px;
      background: url("@/assets/TeacherSituation/AN_CHONGZHI_MR.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Situationanniu4:hover {
      cursor: pointer;
      margin-left: 15px;
      width: 50px;
      height: 28px;
      background: url("@/assets/TeacherSituation/AN_CHONGZHI_XZ.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
  }
  .bingtu-box {
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: space-around;
    .bingtu-left {
      width: 185px;
      height: 75px;
      background: url("@/assets/PlanningDetails/BJ_SHULIANG@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      position: relative;
      .bingtuWenzi {
        width: 100px;
        height: 75px;
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        .bingtuWenzi-item {
          margin-top: 6px;
          width: 100%;
          height: 17px;
          display: flex;
          .itemleft {
            width: 50%;
            height: 17px;
            line-height: 17px;
            color: #caf0ff;
            font-size: 12px;
            text-align: center;
          }
          .itemright {
            width: 50%;
            font-size: 14px;
            line-height: 17px;
            color: #ffffff;
            font-size: 14px;
            text-align: left;
            span {
              font-size: 10px;
            }
          }
        }
      }
    }
  }
  .TeacherSituation-box {
    margin: auto;
    margin-top: 12px;
    width: 376px;
    height: 385px;
    .Biaoge-top {
      width: 100%;
      height: 28px;
      background: url("@/assets/TeacherSituation/LIEBIAOTOUBU2.svg") no-repeat
        center;
      background-size: 100% 100%;
      display: flex;
      font-size: 12px;
      // background-color: pink;
      .Biaoge-title1 {
        width: 102px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: linear-gradient(180deg, #ffffff 51%, #4abaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .Biaoge-title2 {
        width: 70px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: linear-gradient(180deg, #ffffff 51%, #4abaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .Biaoge-title3 {
        width: 70px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: linear-gradient(180deg, #ffffff 51%, #4abaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .Biaoge-title4 {
        width: 70px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: linear-gradient(180deg, #ffffff 51%, #4abaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .Biaoge-title5 {
        width: 64px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: linear-gradient(180deg, #ffffff 51%, #4abaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .Biaoge-centerBox {
      margin-top: 3px;
      overflow-y: scroll;
      width: 100%;
      height: 355px;
      .Biaoge-item {
        width: 100%;
        height: 28px;
        margin-top: 2px;
        background: url("@/assets/PlanningDetails/BJ_LBNEIRONG@2x.png")
          no-repeat center;
        background-size: 100% 100%;
        display: flex;
        font-size: 12px;
        .Biaoge-item1 {
          width: 102px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          color: #caf0ff;
        }
        .Biaoge-item2 {
          width: 70px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          color: #caf0ff;
        }
        .Biaoge-item3 {
          width: 70px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          color: #caf0ff;
        }
        .Biaoge-item4 {
          width: 70px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          color: #caf0ff;
        }
        .Biaoge-item5 {
          width: 64px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          color: #caf0ff;
          .Biaoge-icon {
            cursor: pointer;
            width: 12px;
            height: 14px;
            background-color: red;
            margin: auto;
            margin-top: 7px;
            background: url("@/assets/Educationalland/DINGWEI.svg") no-repeat
              center;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
